<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #box {
      height: 300px;
      width: 300px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: aqua;
    }
  </style>
</head>

<body>
  <div id="box">
    <h1 id="num"></h1>
  </div>
</body>

</html>
<script>
  /*
  防抖:如果一段事件内 频繁的发生，以最后一次为准
  节流：如果一段时间内 频繁发生 按照一定的时间规律执行
  */
  let num = 0
  box.addEventListener('mousemove', function () {
    //防抖
    // debounce(function(){
    //   document.getElementById('num').innerHTML = num++
    // }, 1000)
    //节流
    torottle(function(){
      document.getElementById('num').innerHTML = num++
    },1000)
  })
  /*
    防抖函数
  */
  // function debounce(fn, duration) {
  //   if ( window.timeId) {
  //     clearTimeout(timeId)
  //     window.timeId = null
  //   }
  //   window.timeId = setTimeout(fn, duration)
  // }
  /* 节流 规律执行 */
  function torottle(fn,duration){
    if(!window.timeid){
      window.timeid = setTimeout(function(){
        window.timeid = null
        fn.call(this)
      },duration)
    }
  }
</script>